<#include "/common/taglibs.ftl" />
<@menu code='${entityName!}'/>
<title><@spring.message code="group.type.user" /> - <@spring.message code="list" /></title>
<div class="m-portlet m-portlet--mobile">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    <i class="la la-user"></i> <@spring.message code="group.type.user" /> [${group.name}]
                </h3>
            </div>
        </div>
        <div class="m-portlet__head-tools">
            <a data-toggle="m-tooltip" class="btn m-btn m-btn--icon m-btn--icon-only m-btn--pill btn-outline-metal m--margin-right-10" href="${ctx}/system/group" title="<@spring.message code="button.back.tips"/>">
                <i class="la la-undo"></i>
            </a>
        </div>
    </div>
    <div class="m-portlet__body">
        <div class="table-container">
            <@showMessage />
            <@tableHeaderButtons resourceIdentity='${resourceIdentity!}' buttons=['add','delete'] addButtonType="batchAppendRelation" deleteButtonType="batchDeleteRelation"/>
            <@tableColumnButtons resourceIdentity='${resourceIdentity!}' buttons=['delete'] deleteButtonType="deleteRelation"/>
            <table class="table table-striped- table-bordered table-hover table-checkable dataTable dtr-inline" id="datatable"
                   data-datatable="true"
                   data-datatable-advance-search="false"
                   data-datatable-draw-callback="drawCallback"
            >
                <thead>
                <tr role="row" class="heading">
                    <th width="1%" data-checkable="true" data-orderable="false"></th>
                    <th width="5%" data-data="id" data-searchable="false"> ID# </th>
                    <th width="10%" data-data="groupId" data-render="renderGroup"> <@spring.message code="group"/> </th>
                    <th data-data="userId" data-render="renderUser"> <@spring.message code="user"/> </th>
                    <th width="15%" class="center" data-data="lastModifiedDate" data-search-type="daterange" data-render="renderDateTime"> <@spring.message code="lastModifyDate"/> </th>
                    <th width="15%" data-actions="true"> <@spring.message code="action"/> </th>
                </tr>
                </thead>
                <tbody> </tbody>
            </table>
        </div>
    </div>
</div>

<page-plugin-style>
</page-plugin-style>
<page-style>
</page-style>
<page-plugin-script>
</page-plugin-script>
<page-script>
    <#include "/system/script.ftl" />
    <script>
        var drawCallback = function(grid, $table){
            if(grid.getDataTable().data().length==0) return;
        }

        $('#datatable').on('action.mdt.tool.button', function (e, grid, $table, $button) {
            var type = $button.data("type");
            if (type === 'batchAppendRelation') {
                window.location.href = "${ctx}/system/group/relation/user/${group.id}/batch/append";
            } else if (type === 'batchDeleteRelation') {
                if (grid.getSelectedRowsCount() === 0) {
                    grid.alertNoRecordSelected();
                } else {
                    $.m.confirm({
                        title: $.i18n.alert,
                        text: $.i18n.confirmToDelete,
                        ok: function(){
                            $.m.ajaxAction({
                                url: "${ctx}/system/group/relation/user/${group.id}/batch/delete",
                                data: {
                                    ids : grid.getSelectedRowIds()
                                },
                                successCallback: function(data){
                                    grid.getDataTable().ajax.reload();
                                    $.m.success(data.message);
                                }
                            })
                        }
                    });
                }
            }
        }).on('action.mdt.row.button', function (e, grid, $table, $button, rowIndex, rowData) {
            console.log('action.mdt.row.button', e, grid, $table, $button, rowIndex, rowData)
            var type = $button.data("type");
            if (type === 'deleteRelation') {
                $.m.confirm({
                    title: $.i18n.alert,
                    text: $.i18n.confirmToDelete,
                    ok: function(){
                        $.m.ajaxAction({
                            url: "${ctx}/system/group/relation/user/" + rowData.id + "/delete",
                            successCallback: function(data){
                                grid.getDataTable().ajax.reload();
                                $.m.success(data.message);
                            }
                        })
                    }
                });
            }
        });

    </script>
</page-script>